import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  // 用于控制弹窗显示/隐藏的状态
  bool _showCustomDialog = false;
  late AnimationController _controller;
  late Animation<Color?> _barrierColorAnimation;
  late Animation<double> _dialogScaleAnimation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    );

    // 屏障颜色动画：从完全透明到半透明黑色
    _barrierColorAnimation = ColorTween(
      begin: Colors.transparent,
      end: Colors.black54,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));

    // 弹窗缩放动画：从0.5倍放大到1倍原大小
    _dialogScaleAnimation = Tween<double>(begin: 0.5, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOutBack),
    );
  }

  // 打开弹窗
  void _openDialog() {
    setState(() {
      _showCustomDialog = true;
    });
    _controller.forward(); // 启动动画
  }

  // 关闭弹窗
  void _closeDialog() {
    _controller.reverse().then<void>((value) {
      // 反向播放动画
      setState(() {
        _showCustomDialog = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('高级示例：自定义弹窗')),
      body: Center(
        child: ElevatedButton(onPressed: _openDialog, child: Text('显示自定义弹窗')),
      ),

      // 使用Stack将弹窗和屏障覆盖在主页面上
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: _showCustomDialog
          ? Stack(
              children: [
                // 1. 动画屏障
                AnimatedModalBarrier(
                  color: _barrierColorAnimation,
                  dismissible: true, // 点击屏障可关闭
                  onDismiss: _closeDialog, // 关闭时执行关闭动画
                ),

                // 2. 动画弹窗内容
                Center(
                  child: ScaleTransition(
                    scale: _dialogScaleAnimation,
                    child: Dialog(
                      child: Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('这是一个自定义弹窗'),
                            SizedBox(height: 20),
                            ElevatedButton(
                              onPressed: _closeDialog,
                              child: Text('关闭'),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          : null, // 不显示时，整个Stack为null
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
